<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>05-Teleport传送门</title>
    <style>
      .area {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 300px;
        height: 300px;
        transform: translate(-50%, -50%);
        background-color: skyblue;
      }

      button {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        transform: translate(-50%, -50%);
        background-color: #fff;
      }

      .mask{
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(0,0,0,.5);
      }

    
    </style>
  </head>
  <body>
    <script src="https://unpkg.com/vue@next"></script>
    <div id="root"></div>

    <div id="box" class="box"></div>

    <script>
      const app = Vue.createApp({
        data() {
          return {
              show:false
          };
        },

        methods:{
            handleClick(){
                this.show = !this.show;
            }
        },

        template: `
                <div class="area">
                    <button @click="handleClick">按钮</button>

                    <teleport to=".box">
                        <div class="mask" v-show="show">{{show}}</div>
                    </teleport>
                </div>

               
                `,
      });

      const vm = app.mount("#root");
    </script>
  </body>
</html>
